<script setup>
import { ref, toRaw } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Type from '@components/search/type'
import Search from '@components/search/index'
import PageWrapper from '@components/PageWrapper.vue'
import { common, service } from '@utils'
import { Plus, View, Check, Position } from '@element-plus/icons-vue'
import { usePremission, useRole } from '@hooks'
import Detail from './../withdraw_record/Detail'
import CheckCom from './Check'
import Remit from './Remit'

const premission = usePremission({
    view: 'wealth:accountFundWithdraw:detail',
    remit: 'wealth:accountFundWithdraw:toPay',
    check: 'wealth:accountFundWithdraw:audit'
})
const searchs = ref([
    {
        type: Type.DATE_RANGE,
        width: 7
    },
    {
        type: Type.SELECT,
        key: 'status',
        width: 4,
        labelKey: 'label',
        valueKey: 'value',
        placeholder: '状态',
        data:[]
    },
    {
        width: 6,
        type: Type.SEARCH_BUTTON
    }
])

const pageRef = ref()
const tableRef = ref()
const detailRef = ref()
const checkRef = ref()
const remitRef = ref()

let queryForm = {}

const getStatus = async () => {
    const res = await service.auth.sysdirectListbyCode({ code: 'listWithdrawRecordStatus' });
    res.forEach(item => {
        searchs.value[1].data.push(item)
    });
}

const onSearch = (param) => {
    queryForm = param
    pageRef.value.refresh()
}

const getData = async ({ pageNum, pageSize }, cb) => {
    const param = { ...queryForm }
    if (param.time && param.time.length > 0) {
        param.startApplyTime = param.time[0]
        param.endApplyTime = param.time[1]
        delete param.time
    }
    const res = await service.fund.withdrawApplyList(pageNum, pageSize, param)
    cb(res)
    setTimeout(() => {
        tableRef.value.scrollTo(0, 0)
    }, 0)
}

getStatus()

const width = (function (premission) {
    let width = 24
    premission.view && (width += 33)
    if (premission.remit || premission.check) {
        width += 33
    }
    return Math.max(width, 72)
})(premission)
</script>
<template>
    <section class="main-white">
        <search :items="searchs" @filter="onSearch" />
        <div class="margin-bottom10" v-if="premission.add">
            <el-button type="primary" :icon="Plus" @click="showEdit()">添加</el-button>
        </div>
        <page-wrapper @get-data="getData" ref="pageRef">
            <template v-slot:default="props">
                <vxe-table ref="tableRef" :loading="props.loading" :data="props.tableData.records"
                    :max-height="common.tableHeight(true, premission.add ? 2 : 1)" highlight-hover-row round stripe border>
                    <vxe-column type="seq" width="60"></vxe-column>
                    <vxe-column field="applyTime" title="申请时间" :width="180" />
                    <vxe-column field="companyName" title="申请商户" />
                    <vxe-column field="withdrawAmount" title="提现金额(元)" />
                    <vxe-column title="状态" >
                        <template #default="{ row }">
                            <el-tag >{{common.getValueByKey('value', row.status, searchs[1].data, 'label')}}</el-tag>
                        </template>
                    </vxe-column>
                    <vxe-column field="payeeAccountNo" title="收款账户" />
                    <vxe-column field="remitterName" title="打款人" />
                    <vxe-column field="remitTime" title="打款时间" :width="180" />
                    <vxe-column title="操作" :width="width" fixed="right">
                        <template #default="{ row }">
                            <section class="flex-align flex-wrap">
                                <el-tooltip v-if="premission.view" effect="dark" content="详情" placement="top" :enterable="false">
                                    <el-button type="primary" plain :icon="View" size="small" circle @click="detailRef.open(row)">
                                    </el-button>
                                </el-tooltip>
                                <el-tooltip v-if="premission.check && row.status == 0" effect="dark" content="审核" placement="top"
                                    :enterable="false">
                                    <el-button type="primary" :icon="Check" size="small" circle @click="checkRef.open(row)">
                                    </el-button>
                                </el-tooltip>
                                <el-tooltip v-if="premission.remit && row.status == 3" effect="dark" content="打款" placement="top"
                                    :enterable="false">
                                    <el-button type="success" :icon="Position" size="small" circle @click="remitRef.open(row)">
                                    </el-button>
                                </el-tooltip>
                            </section>
                        </template>
                    </vxe-column>
                </vxe-table>
            </template>
        </page-wrapper>
        <detail ref="detailRef" />
        <check-com ref="checkRef" @refresh="() => pageRef.refresh(true)"/>
        <remit ref="remitRef" @refresh="() => pageRef.refresh(true)"/>
    </section>
</template>